<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title style="font-size: 20px;"></title>

		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				user-select: none
			}

			#map {
				width: 100%;
				height: 100%;
			}

			.btns {
				display: flex;
				flex-direction: column;
				z-index: 9999;
				position: absolute;
				top: 5%;
				right: 0%;
				width: 60px;
				overflow: hidden;
				align-items: center;
				display: none;
			}

			button {
				width: 46px;
				height: 46px;
				border-radius: 50%;
				outline: none;
				border: none;
				margin-bottom: 20px;
				background-color: #f1f1f1;
				color: #fff;
				z-index: 99999;

			}

			#phoneOrDevice {
				background-image: url("map/shebeiweizhi.png");
				background-size: 50%;
				background-repeat: no-repeat;
				/* 防止背景图片重复 */
				background-position: 50%;

			}

			#twoOrthreeD {
				background-image: url("map/a-2Dditu.png");
				background-size: 50%;
				background-repeat: no-repeat;
				/* 防止背景图片重复 */
				background-position: 50%;
			}

			#weilan {
				background-image: url("map/weilan-close.png");
				background-size: 50%;
				background-repeat: no-repeat;
				/* 防止背景图片重复 */
				background-position: 50%;

			}

			#navigation {
				background-image: url("map/daohang.png");
				background-size: 50%;
				background-repeat: no-repeat;
				/* 防止背景图片重复 */
				background-position: 50%;

			}

			.gm-control-active {
				display: none;
			}

			/* 信息提示样式 */
			/*
			 * Property styles in unhighlighted state.
			 */
			.property {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				display: flex;
				transition: all 0.3s ease-out;
				border-radius: 5px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				/* padding: 4px 4px; */
				border-radius: 50%;
				/* border: #388E3C solid 2px; */
				position: relative;
				top: -20px;
			}

			.property::after {
				border-left: 9px solid transparent;
				border-right: 9px solid transparent;
				border-top: 9px solid #fff;
				content: "";
				height: 0;
				left: 50%;
				position: absolute;
				top: 95%;
				transform: translate(-50%, 0);
				transition: all 0.3s ease-out;
				width: 0;
				z-index: 1;
			}

			.property .icon {
				align-items: center;
				display: flex;
				justify-content: center;
			}

			.property .icon svg {
				height: 20px;
				width: auto;
			}

			.property .details {
				/* display: none; */
				top: -250%;
				position: absolute;
				background-color: #fff;
				padding: 10px;
			}


			/*
			 * Property styles in highlighted state.
			 */
			.property.highlight {
				background-color: #FFFFFF;
				border-radius: 8px;
				box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
				height: 80px;
				padding: 8px 15px;
				width: auto;
			}

			.property.highlight::after {
				border-top: 9px solid #FFFFFF;
			}

			.property.highlight .details {
				display: flex;
			}

			.property.highlight .icon svg {
				width: 50px;
				height: 50px;
			}

			.property .bed {
				color: #FFA000;
			}

			.property .bath {
				color: #03A9F4;
			}

			.property .size {
				color: #388E3C;
			}

			/*
			 * House icon colors.
			 */
			.property.highlight:has(.fa-house) .icon {
				color: var(--house-color);
			}

			.property:not(.highlight):has(.fa-house) {
				background-color: var(--house-color);
			}

			.property:not(.highlight):has(.fa-house)::after {
				border-top: 9px solid var(--house-color);
			}

			/*
			 * Building icon colors.
			 */
			.property.highlight:has(.fa-building) .icon {
				color: var(--building-color);
			}

			.property:not(.highlight):has(.fa-building) {
				background-color: var(--building-color);
			}

			.property:not(.highlight):has(.fa-building)::after {
				border-top: 9px solid var(--building-color);
			}

			/*
			 * Warehouse icon colors.
			 */
			.property.highlight:has(.fa-warehouse) .icon {
				color: var(--warehouse-color);
			}

			.property:not(.highlight):has(.fa-warehouse) {
				background-color: var(--warehouse-color);
			}

			.property:not(.highlight):has(.fa-warehouse)::after {
				border-top: 9px solid var(--warehouse-color);
			}

			/*
			 * Shop icon colors.
			 */
			.property.highlight:has(.fa-shop) .icon {
				color: var(--shop-color);
			}

			.property:not(.highlight):has(.fa-shop) {
				background-color: var(--shop-color);
			}

			.property:not(.highlight):has(.fa-shop)::after {
				border-top: 9px solid var(--shop-color);
			}


			.tips_box {
				width: 60px;
				border-radius: 50%;
				height: 60px;
				/* overflow: hidden; */
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 2px 2px;
				border: #6ac695 solid 2px;
			}
			.location_dot{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: white;
			    position: absolute;
				transform: translate(-50%, -50%);
				bottom: -30px;
				left: 50%;
			}
			.tips_logo {
				width: 56px;
				height: 56px;
				border-radius: 50%;
				position: fixed;
			}
			.spinner {
				width: 15px;
				height: 15px;
				animation: spin 1s linear infinite;
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			.gm-style iframe+div {
				border: none !important;
			}

			a[href^="http://maps.google.com/maps"] {
				display: none !important
			}

			a[href^="https://maps.google.com/maps"] {
				display: none !important
			}

			.gmnoprint a,
			.gmnoprint span,
			.gm-style-cc {
				display: none;
			}

			.gmnoprint div {
				background: none !important;
			}

			.drawer {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: rgb(241, 242, 244);
				box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
				transition: height 0.3s ease;
				overflow: hidden;
				z-index: 999999;
				cursor: none;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
			}

			.handle {
				cursor: none;
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 10px;
				padding-bottom: 2px;

				/* display: flex; */
				align-items: center;
				justify-content: center;
			}



			#touch_line {

				display: flex;
				align-items: center;
				justify-content: center;
			}

			#touch_lineone {
				background-color: rgb(192, 194, 195);
				width: 40px;
				height: 4px;
				border-radius: 2px;
			}

			#drawer_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			#tracker_title {
				color: rgb(52, 53, 55);
				font-size: 26px;
				font-weight: 500;

			}

			#tracker_status {
				color: rgb(105, 106, 108);
				;
				font-size: 15px;
			}

			#drawer_bottom {
				margin-top: 5px;
				display: flex;
				flex-direction: column;

			}

			#tracker_location {
				color: rgb(105, 106, 108);
				font-size: 15px;
			}

			.section {
				cursor: none;
				display: none;
				background-color: rgb(241, 242, 244);
				padding-left: 20px;
				padding-right: 20px;

			}

			#section1 {
				padding-bottom: 20px;
			}

			#battery {
				margin-top: 5px;
				background-color: transparent;
				display: flex;
				align-items: center;
				justify-content: start;
			}

			#battery_bg {
				width: 22px;
				height: 11px;
				background-color: #fff;
				border-radius: 2px;
				overflow: hidden;
				border: 1px solid #999;
				overflow: hidden;
				position: relative;
			}

			#battery_have {
				height: 11px;
				background-color: springgreen;
				position: absolute;
				overflow: hidden;
			}

			#batteryPercent {
				color: rgb(105, 106, 108);
				padding-left: 5px;
				font-size: 14px;
			}

			#dot {
				margin-left: 1px;
				width: 1px;
				height: 8px;
				background-color: #999;
			}

			#line {
				width: 1px;
				height: 15px;
				background-color: rgb(201, 202, 204);
				margin-left: 10px;
			}

			#refresh_time {
				margin-left: 10px;
				color: rgb(105, 106, 108);
				font-size: 14px;
			}

			#buttonMenu1 {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.menu_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			#play_voice {
				height: 80px;
				border-radius: 10px;
				background-color: #fff;
				flex: 1;
				/* 使两个div平分剩余空间 */
				margin-right: 7.5px;
			}

			#menu_item_icon {
				width: 32px;
				height: 32px;
			}

			#menu_item_text {
				color: rgb(52, 53, 55);
				font-size: 15px;
				font-weight: 500;
			}

			#tracker_mode {
				height: 80px;
				border-radius: 10px;
				background-color: #fff;
				flex: 1;
				/* 使两个div平分剩余空间 */
				margin-left: 7.5px;
			}

			#buttonMenu2 {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			#contact_tracker {
				height: 80px;
				border-radius: 10px;
				background-color: #fff;
				flex: 1;
				/* 使两个div平分剩余空间 */
				margin-right: 7.5px;
			}

			#hold_spcae {
				height: 80px;
				border-radius: 10px;
				background-color: transparent;
				flex: 1;
				/* 使两个div平分剩余空间 */
				margin-left: 7.5px;
			}

			#section2Top {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px 10px;
				border-top-right-radius: 6px;
				border-top-left-radius: 6px;
			}

			#allTracker {
				color: rgb(52, 53, 55);
				font-size: 18px;
				font-weight: 600;
			}

			#addTrackerIcon {
				width: 32px;
				height: 32px;
			}

			#trackerList_container {
				max-height: 300px;
				overflow: scroll;
				padding-bottom: 20px;

			}

			.list-item {
				display: flex;
				align-items: center;
				padding: 10px;
				border-bottom: 1px solid #eee;
				background-color: #fff;
				cursor: none;
				transition: background 0.3s;
			}

			.list-item:last-child {
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
			}

			/* .list-item:hover {
			  background: #FFFFFF;
			} */

			.avatar {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-right: 15px;
				object-fit: cover;
			}

			.content {
				flex: 1;
			}

			.title {
				font-size: 15px;
				font-weight: 600;
				margin-bottom: 4px;
			}

			.subtitle {
				font-size: 14px;
				color: #666;
			}
			#noneTracker{
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 80px;
				background-color: rgb(241, 242, 244);
				box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
				justify-content: center;
				align-items: center;
				display: none;
			}
			#addTrackTip{
				font-size: 20px;
				color: rgb(52, 53, 55);
			}
			
			
		</style>
	</head>

	<body>

		<div id='map'></div>
		<div class="btns" id="btnBg">
			<button id="phoneOrDevice"> </button>
			<button id="twoOrthreeD"> </button>
			<button id="weilan"> </button>
			<button id="navigation"> </button>
		</div>

		<div class="drawer" id="drawer">
			<div class="handle" id="handle">
				<div id="touch_line">
					<div id="touch_lineone">

					</div>
				</div>
				<div id="drawer_top">
					<div id="tracker_title"></div>
					<div id="tracker_status"></div>
				</div>
				<div id="drawer_bottom">
					<div id="tracker_location"></div>
				</div>

			</div>
			<div class="section" id="section1">
				<div id="sectionOne_top">
					<div id="battery">
						<div id="battery_bg">
							<div id="battery_have"></div>
						</div>
						<div id="dot"></div>
						<div id="batteryPercent"></div>
						<div id="line"></div>
						<div id="refresh_time"></div>
					</div>

				</div>

				<div id="buttonMenu1">
					<div class="menu_item" id="play_voice">
						<img id="menu_item_icon" src="map/map_playvoice.png" alt="" />
						<div id="menu_item_text">
							Play Voice
						</div>

					</div>
					<div class="menu_item" id="tracker_mode">
						<img id="menu_item_icon" src="map/map_mode.png" alt="" />
						<div id="menu_item_text">
							Select Mode
						</div>
					</div>
				</div>
				<div id="buttonMenu2">
					<div class="menu_item" id="contact_tracker">
						<img id="menu_item_icon" src="map/map_contact.png" alt="" />
						<div id="menu_item_text">
							Contact
						</div>
					</div>
					<div class="menu_item" id="hold_spcae">

					</div>

				</div>
			</div>
			<div class="section" id="section2">
				<div id="section2Top">
					<div id="allTracker">
						所有物品
					</div>
					<img id="addTrackerIcon" src="map/add_tracker.png" alt="描述文本">
				</div>
				<div id="trackerList_container">

				</div>

			</div>

		</div>
		<div id="noneTracker">
			<div id="addTrackTip">
				请先选择设备
			</div>
		</div>
	</body>

	<script type="text/javascript" src="../uni.webview.1.5.2.js"> </script>
	<script type="text/javascript" src="../js/trackerStatus.js"></script>
	<script type="text/javascript" src="../js/trackerRefreshTimeTools.js"></script>
	<script>
		(g => {
			var h, a, k, p = "The Google Maps JavaScript API",
				c = "google",
				l = "importLibrary",
				q = "__ib__",
				m = document,
				b = window;
			b = b[c] || (b[c] = {});
			var d = b.maps || (b.maps = {}),
				r = new Set,
				e = new URLSearchParams,
				u = () => h || (h = new Promise(async (f, n) => {
					await (a = m.createElement("script"));
					e.set("libraries", [...r] + "");
					for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
					e.set("callback", c + ".maps." + q);
					a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
					d[q] = f;
					a.onerror = () => h = n(Error(p + " could not load."));
					a.nonce = m.querySelector("script[nonce]")?.nonce || "";
					m.head.append(a)
				}));
			d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[
				l](f, ...n))
		})({
			key: "AIzaSyCaJJDLbPygLYHFL1vi6AlcQmR1P1rRDvA",
			v: "weekly",
			// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
			// Add other bootstrap parameters as needed, using camel case.
		});
	</script>
	<script type="text/javascript">
		// 获取url参数
		function getUrlParams(url) {
			const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
			const params = {};
			let match;
			while (match = paramsRegex.exec(url)) {
				params[match[1]] = match[2];
			}
			return params;
		}

		var map;
		// 加载地图
		var currentPostion;
		var geocoder;
		var currentAddress;
		var currentTime;
		// 创建标记 和提示框
		var marker;
		var dotmarkerCircle;
		var properties;
		var showDevicePostion = true;
		var signalType; //信号类型
		var speed = 0; //速度
		var errormeter = 0;
		var circlesArr = [];
		var fencemarkerArr = [];
		var fenceList = []; //围栏列表
		var trackersList = []; //设备列表
		let timeOut;
		//初始化地图
		async function initMap() {
			const {
				Map
			} = await google.maps.importLibrary("maps");
			const {
				ColorScheme
			} = await google.maps.importLibrary("core")


			map = new Map(document.getElementById("map"), {
				zoom: 15,
				mapId: '9acf2d6299ded60c', //"4504f8b37365c3d0"
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				streetViewControl: false,
				zoomControl: false,
				mapTypeControl: false,
				fullscreenControl: false,
				scaleControl: false,
				rotateControl: true,
				clickableIcons: false,
				center: currentPostion,
				// colorScheme: ColorScheme.DARK,

			});

		}


		//获取手机当前时间
		function getCurrentTime() {
			var currentDate = new Date();
			// 获取年、月、日、小时、分钟、秒
			var year = currentDate.getFullYear();
			var month = currentDate.getMonth() + 1; // 月份是从0开始的
			var day = currentDate.getDate();
			var hours = currentDate.getHours();
			var minutes = currentDate.getMinutes();
			var seconds = currentDate.getSeconds();

			// 格式化为YYYY-MM-DD HH:MM:SS
			var formattedDate = year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0') +
				' ' +
				hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString()
				.padStart(2, '0');

			return formattedDate;
		}

		function timestampToDateTime(timestamp) {

			var date = new Date(Number(timestamp)); // 转换为Date对象
			var year = date.getFullYear(); // 获取年份
			var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份，转为两位数
			var day = ("0" + date.getDate()).slice(-2); // 获取日，转为两位数
			var hours = ("0" + date.getHours()).slice(-2); // 获取小时，转为两位数
			var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟，转为两位数
			var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒，转为两位数

			// 生成格式化的日期字符串
			return year + "-" + month + "-" + day + "   " + hours + ":" + minutes + ":" + seconds;
		}

		function formatUTCTime(timestamp) {
			if (!timestamp) {
				return '-';
			}
			// 创建Date对象并传入UTC时间作为参数
			const date = new Date(Number(timestamp));
			// // 获取当地时间偏移
			// const offset = date.getTimezoneOffset();
			// console.log("offSet===",offset);
			// // 根据偏移调整时间
			// date.setMinutes(date.getMinutes() - offset);
			// 将时间转换为当地标准时间的字符串表示
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hours = date.getHours().toString().padStart(2, '0');
			const minutes = date.getMinutes().toString().padStart(2, '0');
			const seconds = date.getSeconds().toString().padStart(2, '0');
			const localTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return localTime
		}

		//获取当前手机位置
		async function getPhonePostion() {

			//获取当前时间 
			currentTime = getCurrentTime();


			if (navigator.geolocation) {

				navigator.geolocation.getCurrentPosition(function(position) {
					console.log('position', position);
					currentPostion = {
						lat: position.coords.latitude,
						lng: position.coords.longitude
					};
					errormeter = position.coords.accuracy;
					getAddressName();
				}, function() {
					handleLocationError(true, map.getCenter());
				});
			} else {
				// 浏览器不支持地理定位
				handleLocationError(false, map.getCenter());
			}
		}

		// 处理地理定位错误
		function handleLocationError(browserHasGeolocation, infoWindow, pos) {
			infoWindow.setPosition(pos);
			infoWindow.setContent(browserHasGeolocation ?
				'Error: The Geolocation service failed.' :
				'Error: Your browser doesn\'t support geolocation.');
		}

		async function getAddressName() {

			const {
				Geocoder
			} = await google.maps.importLibrary("geocoding");
			const geocoder = new Geocoder();
			geocoder.geocode({
				'location': currentPostion
			}, function(results, status) {
				if (status === google.maps.GeocoderStatus.OK) {
					if (results[0]) {
						let currentAddressInfo = results[0].formatted_address;
						let arr = currentAddressInfo.split(" ");
						currentAddress = arr[0];
						document.getElementById('tracker_location').textContent = currentAddress;
						createMarker();
						// console.log(results[0].formatted_address); // 地名
					} else {
						console.log('No results found');
					}
				} else {
					console.log('Geocoder failed due to: ' + status);
				}
			});
		}
		
		


		async function createMarker() {
			const {
				AdvancedMarkerElement
			} = await google.maps.importLibrary("marker");
			if (marker) {
				marker.setMap(null)
			}
			if (dotmarkerCircle) {
				dotmarkerCircle.setMap(null)
			}
			
			// 将地图中心设置为获取到的位置
			map.setCenter(currentPostion);
			
			dotmarkerCircle = new google.maps.Circle({
				strokeColor: "#6ac695",
				strokeOpacity: 0.3,
				strokeWeight: 1,
				fillColor: "#6ac695",
				fillOpacity: 0.3,
				map,
				center:currentPostion,
				radius: 100,
			});
			marker = new google.maps.marker.AdvancedMarkerElement({
				map,
				content: buildContent(properties),
				position: currentPostion,
				gmpDraggable: false,
				gmpClickable: true
			});
		}
		function buildContent(property) {
			const content = document.createElement("div");
			content.classList.add("property");
			content.innerHTML = `
			<div class='tips_box'>
				<img class='tips_logo' id='dev_logo' src='${headUrl}'/>
			</div> 
			<div class = 'location_dot'></div>
		    `;
			return content;
		}

		function stopIconTransform() {
			document.getElementById('refreshLocation').classList.remove('spinner');
			clearTimeout(timeOut);
			timeOut = null;
		}
		
		
		var headUrl;
		//手机或设备切换
		var phone_device_button = document.getElementById('phoneOrDevice');
		var phone_device_currentBg = 'url(map/shebeiweizhi.png)'; // 初始背景图

		phone_device_button.addEventListener('click', function() {
			if (phone_device_currentBg === 'url(map/shebeiweizhi.png)') {
				showDevicePostion = false;
				getPhonePostion();
				phone_device_currentBg = 'url(map/phonelocation.png)'; // 更换背景图
				headUrl = 'map/map_phone.png';
			} else {
				showDevicePostion = true;
				uni.postMessage({
					data: {
						msg: "getDeviceDeviceInfo",
					}
				})
				phone_device_currentBg = 'url(map/shebeiweizhi.png)'; // 恢复原背景图
			}
			this.style.backgroundImage = phone_device_currentBg; // 应用背景图
		});
		//2D或3D切换
		var twoOrthreeD_button = document.getElementById('twoOrthreeD');
		var twoOrthreeD_currentBg = 'url(map/a-2Dditu.png)'; // 初始背景图    
		twoOrthreeD_button.addEventListener('click', function() {
			map.setCenter(currentPostion);
			if (twoOrthreeD_currentBg === 'url(map/a-2Dditu.png)') {
				map.setMapTypeId('satellite');

				map.setTilt(45);
				twoOrthreeD_currentBg = 'url(map/a-3dditu.png)'; // 更换背景图
			} else {
				map.setMapTypeId('roadmap');
				map.setTilt(0);

				twoOrthreeD_currentBg = 'url(map/a-2Dditu.png)'; // 恢复原背景图
			}
			this.style.backgroundImage = twoOrthreeD_currentBg; // 应用背景图
		});


		//电子围栏显示 或关闭
		var weilan_button = document.getElementById('weilan');
		var weilan_button_currentBg = 'url(map/weilan-close.png)'; // 初始背景图    
		weilan_button.addEventListener('click', function() {
			if (fenceList.length == 0) {
				alert("No fence available for display");
				return;
			}
			if (weilan_button_currentBg === 'url(map/weilan-close.png)') {
				showDeviceFence();
				weilan_button_currentBg = 'url(map/a-mianxingonkaiqion.png)'; // 更换背景图
			} else {
				removeDeviceFence();
				weilan_button_currentBg = 'url(map/weilan-close.png)'; // 恢复原背景图
			}
			this.style.backgroundImage = weilan_button_currentBg; // 应用背景图
		});
		// gpsFlag":1 //1GPS，2WIFI,3基站，4WIFI+基站

		function getSignalType(gpsFlag, radius) {
			if (gpsFlag) {
				switch (gpsFlag) {
					case 1:
						return 'gps: ';
						break;
					case 2:
						return 'wifi: ';
						break;
					case 3:
						return 'wifi: ';
						break;
					case 4:
						return 'wifi: ';
						break;
					default:
						break;
				}
			} else {
				if (radius < 25) {
					return "gps: "
				} else {
					return "wifi: "
				}
			}


		}

		async function showDeviceFence() {
			const {
				AdvancedMarkerElement
			} = await google.maps.importLibrary("marker");


			fenceList.forEach(function(item, index) {
				const fenceCircle = new google.maps.Circle({
					strokeColor: "#FF0000",
					strokeOpacity: 0.8,
					strokeWeight: 2,
					fillColor: "#FF0000",
					fillOpacity: 0.35,
					map,
					center: {
						lat: item.lat,
						lng: item.lng,
					},
					radius: item.radius,
				});
				const marker = new google.maps.marker.AdvancedMarkerElement({
					map,
					// content: buildContent(properties),
					position: {
						lat: item.lat,
						lng: item.lng,
					},
				});
				fencemarkerArr.push(marker);
				circlesArr.push(fenceCircle);
			})
		}

		function removeDeviceFence() {
			for (var i = 0; i < circlesArr.length; i++) {
				circlesArr[i].setMap(null);
				fencemarkerArr[i].setMap(null);
			}
		}
		//更新设备名称 状态 位置 电量  

		function updateTrackerInfo() {
			document.getElementById('tracker_title').textContent = properties.dvName;
			document.getElementById('tracker_status').textContent = window.getTrackerStatus(properties.liveMode);
			document.getElementById("batteryPercent").textContent = properties.dl + "%";
			document.getElementById("battery_have").style.width = properties.dl + "%";
			document.getElementById("refresh_time").textContent = window.getUpdateTime(Number(properties.locTime));
			if(properties.dl <=10){
				document.getElementById("battery_have").style.backgroundColor = 'red';
			}
		}


		function createListItem(item) {
			const listItem = document.createElement('div');
			listItem.className = 'list-item';

			// 绑定点击事件
			listItem.addEventListener('click', () => {
				handleItemClick(item); // 传递完整模型数据
			});

			// 头像
			const avatar = document.createElement('img');
			avatar.className = 'avatar';
			avatar.src = item.headUrl;
			avatar.alt = '用户头像';

			// 内容区域
			const content = document.createElement('div');
			content.className = 'content';

			const title = document.createElement('div');
			title.className = 'title';
			title.textContent = item.dvName;

			const subtitle = document.createElement('div');
			subtitle.className = 'subtitle';
			subtitle.textContent ='ICCID:'+ item.imei;

			// 组装元素
			content.appendChild(title);
			content.appendChild(subtitle);
			listItem.appendChild(avatar);
			listItem.appendChild(content);

			return listItem;
		}

		// 点击处理函数
		function handleItemClick(item) {
			console.log('点击的模型数据:', item.imei);
			// 这里可以执行路由跳转、打开弹窗等操作

			uni.postMessage({
				data: {
					msg: "changeImei",
					data: item.imei,
				}
			})

			showOldState();

		}

		// 初始化列表
		function initList() {
			const container = document.getElementById('trackerList_container');
			trackersList.forEach(item => {
				container.appendChild(createListItem(item));
			});
		}

		// 页面加载时初始化
		window.addEventListener('DOMContentLoaded', initList);
		window.addEventListener('UniAppJSBridgeReady', function() {

			uni.postMessage({
				data: {
					msg: "finishloaded",
				}
			})
			window.getVueMessage = (data) => {
				console.log('收到APP消息', JSON.stringify(data));
				if (data.type == 1) {
					properties = data.msg;

					headUrl = properties.headUrl;
					if (!headUrl) {
						headUrl = "../device/device_icon.png";
					}

					currentPostion = {
						lat: Number(properties.lat),
						lng: Number(properties.lng),
					};
					speed = properties.speed;
					currentTime = formatUTCTime(properties.locTime);
					signalType = getSignalType(properties.gpsFlag, properties.radius);
					errormeter = properties.radius; //properties.gpsFlag == 1 ? 30 :
					if (!map) {
						initMap();
					}
					document.getElementById("map").style.display = "block";
					getAddressName();
					document.getElementById("btnBg").style.display = "block";
					document.getElementById('drawer').style.display = "block";
					document.getElementById("noneTracker").style.display = "none";
					document.getElementById('phoneOrDevice').style.backgroundImage = 'url(map/shebeiweizhi.png)';
					updateTrackerInfo();
				} else if (data.type == 2) {
					document.getElementById("btnBg").style.display = "none";
					currentPostion = {
						lat: Number(data.msg.lat),
						lng: Number(data.msg.lng),
					};
					document.getElementById("map").style.display = "block";
					document.getElementById('drawer').style.display = "none";
					document.getElementById("noneTracker").style.display = "flex";
					initMap();
				} else if (data.type == 3) {
					fenceList = data.msg;
				} else if (data.type == 4) {
					stopIconTransform();
				} else if (data.type == 5) { //隐藏
					// document.getElementById("map").style.display = "none";
					// document.getElementById("btnBg").style.display = "none";
					// document.getElementById('drawer').style.display = "none";
					document.getElementById("noneTracker").style.display = "none";
				} else if (data.type == 6) { //设备列表数据
					trackersList.length = 0;
					trackersList = data.msg;
					initList()
				}
				else if (data.type == 7) { //设备列表数据
					document.getElementById("map").style.display = "none";
					document.getElementById("btnBg").style.display = "none";
					document.getElementById('drawer').style.display = "none";
					document.getElementById("noneTracker").style.display = "flex";
				}
			}
			//添加设备或者选择设备
			document.getElementById("noneTracker").onclick = function(){
				if(trackersList.length == 0){
					uni.postMessage({
						data: {
							msg: "addTracker",
						}
					})
				}else{
					uni.postMessage({
						data: {
							msg: "selectTracker",
						}
					})
				}
				
			}
			//导航
			document.getElementById('navigation').onclick = function() {
				uni.postMessage({
					data: {
						msg: "navigation",
						address: currentAddress,
						position: currentPostion.lat.toString() + ',' + currentPostion.lng.toString()
					}
				})
			}
			//添加新设备
			document.getElementById('addTrackerIcon').onclick = function() {
				console.log("添加新设备")
				uni.postMessage({
					data: {
						msg: "addTracker",
					}
				})
			}
			//播放响铃
			document.getElementById('play_voice').onclick = function() {
				uni.postMessage({
					data: {
						msg: "playTrackerVoice",
					}
				})
			}
			//模式选择
			document.getElementById('tracker_mode').onclick = function() {
				uni.postMessage({
					data: {
						msg: "selectTrackerMode",
					}
				})
			}
			//联系支持
			document.getElementById('contact_tracker').onclick = function() {
				uni.postMessage({
					data: {
						msg: "contactTracker",
					}
				})
			}

		});

		document.addEventListener('gesturestart', function(event) {
			event.preventDefault()
		})

		const drawer = document.getElementById('drawer');
		const drawerHandle = document.getElementById('handle');
		const section1 = document.getElementById('section1');
		const section2 = document.getElementById('section2');
		let currentState = 0;

		let touchStartY = 0;
		let touchEndY = 0;

		drawerHandle.addEventListener('touchstart', (e) => {
			touchStartY = e.touches[0].clientY;
		});

		drawerHandle.addEventListener('touchend', (e) => {
			touchEndY = e.changedTouches[0].clientY;
			const deltaY = touchStartY - touchEndY;

			if (deltaY > 20) {
				if (currentState === 0) {
					section1.style.display = 'block';
					drawer.style.height = 'calc(' + (drawerHandle.offsetHeight + section1.offsetHeight) + 'px)';
					currentState = 1;
				} else if (currentState === 1) {
					section2.style.display = 'block';
					drawer.style.height = 'calc( ' + (drawerHandle.offsetHeight + section1.offsetHeight + section2
						.offsetHeight) + 'px)';
					currentState = 2;
				}
			} else if (deltaY < -20) {
				section1.style.display = 'none';
				section2.style.display = 'none';
				drawer.style.height = 'calc(' + drawerHandle.offsetHeight + 'px)';
				currentState = 0;
			}
		});
		section1.addEventListener('touchstart', (e) => {
			touchStartY = e.touches[0].clientY;
		});

		section1.addEventListener('touchend', (e) => {
			touchEndY = e.changedTouches[0].clientY;
			const deltaY = touchStartY - touchEndY;

			if (deltaY > 20) {
				if (currentState === 0) {
					section1.style.display = 'block';
					drawer.style.height = 'calc(' + (drawerHandle.offsetHeight + section1.offsetHeight) + 'px)';
					currentState = 1;
				} else if (currentState === 1) {
					section2.style.display = 'block';
					drawer.style.height = 'calc( ' + (drawerHandle.offsetHeight + section1.offsetHeight + section2
						.offsetHeight) + 'px)';
					currentState = 2;
				}
			} else if (deltaY < -20) {
				section1.style.display = 'none';
				section2.style.display = 'none';
				drawer.style.height = 'calc(' + drawerHandle.offsetHeight + 'px)';
				currentState = 0;
			}
		});
		//抽屉恢复原状
		function showOldState() {
			section1.style.display = 'none';
			section2.style.display = 'none';
			drawer.style.height = 'calc(' + drawerHandle.offsetHeight + 'px)';
			currentState = 0;
		}


		section2.addEventListener('touchstart', (e) => {
			touchStartY = e.touches[0].clientY;
		});

		section2.addEventListener('touchend', (e) => {
			
			if(trackersList.length >6){
				return
			}
			touchEndY = e.changedTouches[0].clientY;
			const deltaY = touchStartY - touchEndY;

			if (deltaY > 20) {
				if (currentState === 0) {
					section1.style.display = 'block';
					drawer.style.height = 'calc(' + (drawerHandle.offsetHeight + section1.offsetHeight) + 'px)';
					currentState = 1;
				} else if (currentState === 1) {
					section2.style.display = 'block';
					drawer.style.height = 'calc( ' + (drawerHandle.offsetHeight + section1.offsetHeight + section2
						.offsetHeight) + 'px)';
					currentState = 2;
				}
			} else if (deltaY < -20) {
				section1.style.display = 'none';
				section2.style.display = 'none';
				drawer.style.height = 'calc(' + drawerHandle.offsetHeight + 'px)';
				currentState = 0;
			}
		});
		drawerHandle.addEventListener('click', (e) => {
			if (currentState === 0) {
				section1.style.display = 'block';
				drawer.style.height = 'calc(' + (drawerHandle.offsetHeight + section1.offsetHeight) + 'px)';
				currentState = 1;
			} else if (currentState === 1) {
				ection2.style.display = 'block';
				drawer.style.height = 'calc( ' + (drawerHandle.offsetHeight + section1.offsetHeight + section2
					.offsetHeight) + 'px)';
				currentState = 2;
			} else {
				section1.style.display = 'none';
				section2.style.display = 'none';
				drawer.style.height = 'calc(' + drawerHandle.offsetHeight + 'px)';
				currentState = 0;
			}
		});
	</script>